<template>
    <div>
        <div class="login">
            <div class="first">
                <img src="../../../assets/image/logo.png" alt="logo" class="logo">
            </div>
            <div class="wrap">
                <van-button type="danger" class="bottom-button" @click="login">用户登录</van-button>
                <p @click="ToIndex" class="toindex">随便逛逛</p>
                <div class="link">
                    <span><img src="../../../assets/image/weixin.png" alt="微信">微信</span> |
                    <span><img src="../../../assets/image/qq.png" alt="qq">QQ</span> |
                    <span><img src="../../../assets/image/weibo.png" alt="微博">微博</span>
                </div>
            </div>
            <p class="agree">登陆表示您同意《爱彼此家居服务条款》</p>
        </div>
    </div>
</template>

<script>
    export default {
    data() {
        return {

        };
    },
    methods: {
        ToIndex(){  // 点击随便逛逛，进入首页
            this.$router.replace('/')
        },
        login(){    // 登陆
            this.$router.replace('/loginform')
        }
    }
};
</script>
<style lang='stylus' scoped>
// 未登录状态
    
    .login 
        animation bounce-in 50s linear infinite
        background url('../../../assets/image/background.png') no-repeat 0 0
        background-size cover
        color #fff
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        display flex
        flex-direction column
        align-items center
        justify-content space-between
        font-size 16px
        z-index 300
        .first
            // flex-grow 1
            padding-top 109px
        .logo
            width 70px

        p
            line-height 77px
            text-decoration underline
            font-size 12px 
        
        .wrap
            display flex
            flex-direction column
            align-items center
            margin-top 200px
        // 登陆按钮
        .bottom-button 
            width 330px
            height 40px
            background #CD003D
        .link
            width 100%
            display flex
            justify-content center
            color #8F9DA4
            span 
                height 28px
                line-height 28px
                color #fff
                margin 0 30px
            img
                width 28px
                border-radius 50%
                vertical-align middle
        .agree
            width 100%
            line-height 66px
            text-align center

    // 背景图移动
    @keyframes bounce-in {
        0% {
            background-position-x 0;
      }
      50% {
            background-position-x 50%;
      }
      100% {
            background-position-x 100%;
      }
    }
</style>
